<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 需求 ：一个方块 从左至右移动 ，之后在向下移动，之后在向上移动，最后再回来 

        //requestAnimationFrame:  动画帧,支持后台运行
        /* 
            boxEl.style.left;  只能设置 或者 获取  行内样式
            let num= boxEl.style.left

            getComputedStyle(样式元素,null)[样式名]
            第一个参数：要获取样式的元素
            第二个参数：可以传递一个伪元素，一般都传null

            该方法会返回一个对象，对象中封装了当前元素对应的样式
        */

        //向右移动
        //获取方块当前所在的left值
        // let boxEl = document.querySelector(".box");
        // //获取非行内样式
        // var timer = setInterval(() => {
        //     let num = parseInt(getComputedStyle(boxEl, null)["left"]);
        //     console.log(num);
        //     let speed = 10;
        //     num > 290 ? clearInterval(timer) : boxEl.style.left = num + speed + "px";
        // },100)


        //封装移动函数
        let boxEl = document.querySelector(".box");
        const move = (boxEl, target, dir, cb) => {
            let timer = setInterval(() => {
                let num = parseInt(getComputedStyle(boxEl, null)[dir]);
                let speed = 10 * (target > num ? 1 : -1);
                if (num === target) {
                    clearInterval(timer);
                    cb();
                } else {
                    boxEl.style[dir] = num + speed + "px";
                }
            }, 100)
        }
        //调用画圈
        move(boxEl, 300, "left", () => {
            move(boxEl, 300, "top", () => {
                move(boxEl, 0, "left", () => {
                    move(boxEl, 0, "top", () => {
                        console.log("完成");
                    })
                })
            })
        })
    </script>
</body>

</html>